<template>
	<view class="agreement">
		<view class="" v-html="agreementData.content">
		</view>
		<view class="bottom">
			<view class="radio">
				<u-checkbox-group>
					<u-checkbox v-model="checkbox" />
				</u-checkbox-group>
				<view class="ml10">我已阅读并且同意该协议</view>
			</view>
			
			<view class="flex box2">
				<view class="">
					乙方签字：
				</view>
			
				<view class="imgBox" @click="autograph" v-if="!agreementData.images">
					点击进行签名
				</view>
				<view class="" @click="autograph" v-else>
					<image class="imgqm" :src="$wanlshop.oss(agreementData.images)" mode=""></image>
				</view>
			</view>
			<view class="">
				甲方签字：好饰商家版平台
			</view>
			<view class="btnMoney" @click="submit">
				缴纳保证金
			</view>
		</view>

		<view class="signature" v-if="showSignature">
			<view style="width: 100vw ;height: 100vh;">
				<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
					:openSmooth="openSmooth"></l-signature>
			</view>
			<view class="btns">
				<button @click="onClick('clear')">清空</button>
				<button @click="onClick('undo')">撤消</button>
				<button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
				<button @click="onClick('save')">保存</button>
				<!-- uvue 不支持 openSmooth -->
			</view>
			<view class="arrowUp" @click="showSignature = false">
				<u-icon name="arrow-up" size="36"></u-icon>
			</view>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				showSignature: false,
				checkbox: false,
				agreementData: {},

				title: 'Hello',
				penColor: '#000',
				penSize: 5,
				url: '',

				openSmooth: true,

			}
		},
		onLoad() {
			this.getAreement()
		},
		methods: {
			onClick(type) {
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				}
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							console.log(res.isEmpty)
							// 生成图片的临时路径
							// H5 生成的是base64
							this.url = res.tempFilePath
							this.$api.upload({
								url: '/common/upload',
								filePath: res.tempFilePath,
								name: 'file',
								success: data => {
									if (data) {
										
										this.agreementData.images = data.url
										this.showSignature = false

									}
								}
							});
							return


						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			},
			submit() {
				if (!this.checkbox) {
					uni.showToast({
						title: '请阅读并同意服务商协议',
						icon: 'none'
					})
					return
				}
				this.$api.post({
					url: '/store.entry/signature',
					data: {
						category_id: 32,
						images: [{
							name: 'qianming',
							url: this.agreementData.images
						}]
					}
				}).then(res => {
					if (res) {
						if (res) {
							uni.navigateTo({
								url: "/pages/m-shop/me/account/info/bond"
							})
						}
					}
				})
			},
			autograph() {
				if (!this.checkbox) {
					uni.showToast({
						title: '请阅读并同意服务商协议',
						icon: 'none'
					})
					return
				} else {
					this.showSignature = true
				}
			},
			getAreement() {
				this.$api.post({
					url: '/store.entry/treaty?treaty_id=32'
				}).then(res => {
					console.log(res);
					if (res.content && res.name) {
						this.agreementData = res
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.arrowUp {
		position: absolute;
		right: 40rpx;
		top: 30rpx;
	}

	.imgqm {
		width: 96rpx;
		height: 166rpx;
		border: 1rpx dashed #999999;
		transform: rotate(-90deg);
		margin-left: 40rpx;
	}

	.signature {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;
		background: #fff;

		.btns {
			width: 600rpx;
			height: 96rpx;
			left: -230rpx;
			bottom: 280rpx;
			display: flex;
			transform: rotate(90deg);
			position: absolute;
			z-index: 4;
		}
	}

	.agreement {
		padding: 32rpx 24rpx 500rpx 24rpx;

		.bottom {
			padding: 40rpx 40rpx 60rpx 40rpx;
			position: fixed;
			bottom: 0rpx;
			background: #fff;
			width: 100%;
			left: 0;

			.radio {
				display: flex;
				align-items: center;

				::v-deep .u-checkbox {
					width: 34rpx !important;
				}
			}

			.imgBox {
				font-size: 20rpx;
				color: #FF0000;
				border: 2rpx dashed #999999;
				padding: 34rpx 18rpx;
			}

			.box2 {
				margin-top: 28rpx;
				align-items: center;
				margin-bottom: 28rpx;
			}

			.btnMoney {
				margin-top: 28rpx;
				width: 666rpx;
				background: linear-gradient(160deg, #2D94F3 0%, #3072F8 100%);
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(46, 132, 246, 0.2);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-weight: 500;
				font-size: 36rpx;
				text-align: center;
				padding: 28rpx 0;
				color: #FFFFFF;
			}
		}
	}
</style>